<template>
  <div class="">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
        </el-header>

        <el-main>
          <el-row>
            <el-col :span="4">
                <el-input v-model="staffNo" placeholder="匹配工号"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="primary" @click="changeFrom()" plain>增加员工</el-button>
            </el-col>
          </el-row>

          <el-table v-loading="loading" :data="this.pageInfo.list" border>
            <el-table-column width="30" label="#">
              <template slot-scope="temp">
                {{ temp.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column width="80" prop="dename" label="部门名称">
            </el-table-column>
            <el-table-column width="100" prop="stationname" label="岗位名称">
            </el-table-column>
            <el-table-column width="100" prop="eno" label="工号">
            </el-table-column>
            <el-table-column width="80" prop="ename" label="姓名">
            </el-table-column>
            <el-table-column width="100" prop="eaccount" label="账号">
            </el-table-column>
            <el-table-column width="50" label="性别">
              <template slot-scope="temp">
                {{ temp.row.esex | filterSex }}
              </template>
            </el-table-column>
            <el-table-column width="120" prop="ephone" label="电话">
            </el-table-column>
            <el-table-column width="170" prop="eemail" label="邮箱">
            </el-table-column>
            <el-table-column width="100" prop="eaddress" label="地址">
            </el-table-column>
            <el-table-column width="160" prop="einputDate" label="入职日期">
            </el-table-column>
            <el-table-column width="180" label="操作">
              <template slot-scope="temp">
                <el-button
                  icon="el-icon-edit"
                  size="mini"
                  @click="modify(temp.row.eid)"
                  type="primary"
                  >修改</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  @click="remove(temp.row.eid)"
                  size="mini"
                  type="danger"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :background="true"
            :pager-count="4"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            :page-sizes="[3, 6]"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
    <el-drawer
      title="修改员工信息"
      :visible.sync="table"
      direction="rtl"
      size="50%"
      style="text-align: center"
    >
      <el-form :model="staff" style="display: inline-block">
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号" width="200px">
              <el-input v-model="staff.eno" placeholder="员工编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工姓名">
              <el-input v-model="staff.ename" placeholder="员工姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="gender">
            <el-select
              v-model="staff.esex"
              placeholder="请选择"
              style="width: 35%"
            >
              <el-option :value="0" label="男"></el-option>
              <el-option :value="1" label="女"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="门店" prop="">
              <el-select
                v-model="staff.shopid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in shop"
                  :key="item.shopid"
                  :label="item.shopname"
                  :value="item.shopid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="部门" prop="gender">
              <el-select
                v-model="staff.deid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in dep"
                  :key="item.deid"
                  :label="item.dename"
                  :value="item.deid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="部门组" prop="gender">
              <el-select
                v-model="staff.groupid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in group"
                  :key="item.groupid"
                  :label="item.groupname"
                  :value="item.groupid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="岗位" prop="gender">
              <el-select
                v-model="staff.stationid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in station"
                  :key="item.stationid"
                  :label="item.stationname"
                  :value="item.stationid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="角色" prop="gender">
              <el-select
                v-model="staff.jurisdictionid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in jur"
                  :key="item.jurisdictionid"
                  :label="item.jurisdictionname"
                  :value="item.jurisdictionid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号">
              <el-input
                v-model="staff.eaccount"
                placeholder="登录账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码">
              <el-input v-model="staff.epwd" placeholder="登录密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证">
              <el-input
                v-model="staff.eidentity"
                placeholder="身份证"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="staff.ephone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱">
              <el-input v-model="staff.eemail" placeholder="邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="住址">
              <el-input v-model="staff.eaddress" placeholder="住址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="入职日期">
              <el-date-picker
                v-model="staff.einputDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button type="primary" @click="mofifystaff()"
                >修改<i class="el-icon-upload el-icon--right"></i
              ></el-button>
              <el-button type="danger" @click="table = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
    <el-dialog title="新增员工" :visible.sync="dialogFormVisible">
      <el-form :model="staff">
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号" width="200px">
              <el-input v-model="staff.eno" placeholder="员工编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工姓名">
              <el-input v-model="staff.ename" placeholder="员工姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="gender">
            <el-select
              v-model="staff.esex"
              placeholder="请选择"
              style="width: 35%"
            >
              <el-option :value="0" label="男"></el-option>
              <el-option :value="1" label="女"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门店" prop="">
              <el-select
                v-model="staff.shopid"
                @change="queryDep(staff.shopid)"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in shop"
                  :key="item.shopid"
                  :label="item.shopname"
                  :value="item.shopid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门" prop="gender">
              <el-select
                v-model="staff.deid"
                @change="queryrGroup(staff.deid)"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in dep"
                  :key="item.deid"
                  :label="item.dename"
                  :value="item.deid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门组" prop="gender">
              <el-select
                v-model="staff.groupid"
                @change="queryStat()"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in group"
                  :key="item.groupid"
                  :label="item.groupname"
                  :value="item.groupid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="岗位" prop="gender">
              <el-select
                v-model="staff.stationid"
                @change="queryJur()"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in station"
                  :key="item.stationid"
                  :label="item.stationname"
                  :value="item.stationid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="角色" prop="gender">
              <el-select
                v-model="staff.jurisdictionid"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="item in jur"
                  :key="item.jurisdictionid"
                  :label="item.jurisdictionname"
                  :value="item.jurisdictionid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号">
              <el-input
                v-model="staff.eaccount"
                placeholder="登录账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码">
              <el-input v-model="staff.epwd" placeholder="登录密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证">
              <el-input
                v-model="staff.eidentity"
                placeholder="身份证"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="staff.ephone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱">
              <el-input v-model="staff.eemail" placeholder="邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="住址">
              <el-input v-model="staff.eaddress" placeholder="住址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="入职日期">
              <el-date-picker
                v-model="staff.einputDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmp()">新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
        pageInfo: {},
        shop:{},
        dep:{},
        group:{},
        station:{},
        jur:{},
        staffNo:'',
        loading: true,
        dialogFormVisible: false,
        table: false,
        staff:{
            jurisdictionid:'',
            shopid:'',
            deid:'',
            groupid:'',
            stationid:'',
            eno:'',
            ename:'',
            esex:'',
            eaccount:'',
            epwd:'',
            ephone:'',
            eemail:'',
            eaddress:'',
            einputDate:'',
            eimage:'',
            eidentity:''
        },	
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      this.goToPage(this.pageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
      this.goToPage(val, this.pageInfo.pageSize);
    },
    goToPage(p, s) {
      let _this = this;
      this.loading = true;
        this.$http
        .get(`http://localhost:8080/api/staff/${p}/${s}`)
        .then(function (resp) {
          _this.pageInfo = resp.data;
          _this.loading = false;
        });
    },
    remove(id) {
        let _this = this;
        this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http.delete(`http://localhost:8080/api/staff/remove/${id}`).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '删除成功!',
                    center: true,
                    type: 'success'
                });
                _this.goToPage(1,3);
            }
            })
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });          
        });
    },
    queryShop(){
        let _this = this;
        this.$http.get(`http://localhost:8080/api/staff/shop`).then(function(resp) {
            _this.shop = resp.data;
        })
    },
    queryDep(sid){
        let _this = this;
        this.$http.get(`http://localhost:8080/api/staff/dep/${sid}`).then(function(resp) {
            _this.dep = resp.data;
        })
    },
    queryrGroup(did){
        let _this = this;
         this.$http.get(`http://localhost:8080/api/staff/group/${did}`).then(function(resp) {
            _this.group = resp.data;
        })
    },
    queryStat(){
        let _this = this;
        this.$http.get(`http://localhost:8080/api/staff/station`).then(function(resp) {
            _this.station = resp.data;
        })
    },
    queryJur(){
        let _this = this;
        this.$http.get(`http://localhost:8080/api/staff/jur`).then(function(resp) {
            _this.jur = resp.data;
        })
    },
    addEmp(){
        let _this = this;
        this.$http.post(`http://localhost:8080/api/staff/add`,_this.staff).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '新增员工成功!',
                    center: true,
                    type: 'success'
                });
                _this.dialogFormVisible=false;
                _this.goToPage(1,3);
            }
        })
    },
    changeFrom(){
        this.dialogFormVisible=true,
        this.queryShop(),
        this.staff={
            jurisdictionid:'',
            shopid:'',
            deid:'',
            groupid:'',
            stationid:'',
            eno:'',
            ename:'',
            esex:'',
            eaccount:'',
            epwd:'',
            ephone:'',
            eemail:'',
            eaddress:'',
            einputdate:'',
            eimage:'',
            eidentity:''
        }
    },
    queryEmp(id){
        let _this = this;
        this.$http.get(`http://localhost:8080/api/staff/queryBy/${id}`).then(function(resp) {
            _this.staff = resp.data;
            _this.queryDep(_this.staff.shopid);
            _this.queryrGroup(_this.staff.deid);
            _this.queryStat();
            _this.queryJur();
        })
    },
    modify(id){
        let _this = this;
        _this.table = true;
        _this.queryEmp(id);
    },
    mofifystaff(){
        let _this=this;
        this.$http.put(`http://localhost:8080/api/staff/modifyStaff`,_this.staff).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '修改员工成功!',
                    center: true,
                    type: 'success'
                });
                _this.table=false;
                _this.goToPage(1,3);
            }
        })
    }
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.goToPage(1,3);
    
  },
  //监控data中的数据变化
  watch: {},
  filters: {
    filterSex(val) {
      return val == 0 ? "男" : "女";
    },
  },
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>